<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="储位名称">
            <el-input v-model="form.positionName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库备注">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="5">
          <el-form-item label="控制数量">
            <el-switch v-model="form.isControllerCount"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="存储单位">
            <el-select v-model="form.unit" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="6">
          <el-form-item label="存储量">
            <el-input-number v-model="form.maxCount" :step="0.1" :max="9999999" :disabled="!form.isControllerCount"></el-input-number>
          </el-form-item>
        </el-col>



      </el-row >
      <el-row type="flex">
        <el-col>
          <el-form-item label="储位分类">
            <el-select v-model="form.positionType" placeholder="请选择">
              <el-option
                  v-for="item in classifyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="储位条码">
            <el-input v-model="form.positionBarCod"></el-input>
          </el-form-item>
        </el-col>
              <el-col :span="6">
                <el-form-item label="是否启用">
                  <el-switch v-model="form.status"></el-switch>
                </el-form-item>
              </el-col>
      </el-row>






      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认添加</el-button>
        <el-button @click="canceAdd">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "addposition",
  data(){
    return{
      warehouseAreaId:'',
      form:{
        positionName:'',
        remark:'',
        maxCount:0,
        status:false,
        isControllerCount:false,
        positionBarCod:'',
        unit:'',
        positionType:'',
        warehouseAreaId:''
      },
      classifyList:[],
      options:[
        {
          label:'克',
          value: '克'
        },
        {
          label:'千克',
          value:'千克',
        }
      ]
    }
  },
  methods:{
    onSubmit(){
      //校验数据
      if (this.form.positionName==null||this.form.positionName==''){
        this.$message({
          message:"储位名称不可以为空",
          type:"error"
        })
        return false;
      }

      if (this.form.unit==null||this.form.unit==''){
        this.$message({
          message:"储位单位不可以为空",
          type:"error"
        })
        return false;
      }

      if (this.form.positionType==null||this.form.positionType==''){
        this.$message({
          message:"储位类型不可以为空",
          type:"error"
        })
        return false;
      }
      //处理数据
      if (!this.form.isControllerCount){
        this.form.maxCount=null;
      }
      if (this.form.isControllerCount){
        this.form.isControllerCount=1;
      }
      else this.form.isControllerCount=0;
      if (this.form.status){
        this.form.status=0;
      }
      else this.form.status=1
      //发送请求添加储位
      axios({
        url:'http://localhost:8080/api/position/add',
        method:'post',
        data:this.form
      }).then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
          //关闭对话框
          this.$bus.$emit("closeAddPosition",true,this.form.warehouseAreaId)
        }
        else this.$message({
          type:'error',
          message:resp.data.msg
        })
      })

    },
    canceAdd(){
      //关闭对话框
      this.$bus.$emit("closeAddPosition",false,null)
    }
  },
  mounted() {
    this.$bus.$on('giveMeWarehouseAreaId',(warehouseAreaId)=>{
      this.form.warehouseAreaId=warehouseAreaId;
    })

    //查找所有的分类信息
    axios.get("http://localhost:8080/api/classify/findAll").then(resp=>{
      let list = resp.data.data;
      if (list==null||list.length==0){
        this.$message({
          message:"没有可选的储位信息，请先创建货品分类",
          type:'error'
        })
        return false;
      }
      for (let i = 0; i < list.length; i++) {
        let obj = {
          value:list[i].id,
          label:list[i].classifyName
        }
        this.classifyList.push(obj)
      }
    })
  }
}
</script>

<style scoped>

</style>